<!DOCTYPE html>
<style>
	@import "ruby-boxes.css";
	body { display: flex; align-items: center; }
	body > .ruby { display: grid; grid-template-columns: auto auto auto; }
	.ruby  div   { display: grid; grid-template-columns: subgrid; }
	.rtc, .rbc   {                grid-column: span 2; }
</style>

<div class=ruby>
	<div class="rbc">
		<div class="rb">上</div><div class="rb">手</div>
	</div>
	<div class="rtc">
		<div class="rt">じょう</div><div class="rt">ず</div>
	</div>
</div>

<div class="labels">
	<div class="ruby">ruby container</div>
	<div>
		<div class="rbc">ruby base container</div>
		<div class="rb">ruby bases</div>
	</div>
	<div>
		<div class="rtc">ruby annotation container</div>
		<div class="rt">ruby annotations</div>
	</div>
</div>
